<template>
  <div>
    <el-container>
      <el-main>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基础曲线导出" name="first">
            <el-form ref="dataForm1" :rules="rules" :model="formSubmitData" label-position="right" label-width="120px"
                     style="width: 100%; margin:10px auto;">
              <el-row :gutter="20">
                <el-col :span="12" :offset="1">
                  <el-form-item label="基础曲线：" prop="cv_code">
                    <el-select v-model="formSubmitData.cv_code" class="filter-item" placeholder="Please select">
                      <el-option v-for="item in baseCurveOptions" :key="item.cv_code" :label="item.cv_name"
                                 :value="item.cv_code"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-row :gutter="20">
              <el-col :span="24" :offset="4">
                <el-button type="primary" @click="exportData('dataForm1')">
                  导出
                </el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="转移曲线导出" name="second">
            <el-form ref="dataForm2" :rules="rules" :model="formSubmitData" label-position="right" label-width="120px"
                     style="width: 100%; margin:10px auto;">
              <el-row :gutter="20">
                <el-col :span="12" :offset="1">
                  <el-form-item label="转移曲线：" prop="cv_code">
                    <el-select v-model="formSubmitData.cv_code" class="filter-item" placeholder="Please select">
                      <el-option v-for="item in transferCurveOptions" :key="item.cv_code" :label="item.cv_name"
                                 :value="item.cv_code"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-row :gutter="20">
              <el-col :span="24" :offset="4">
                <el-button type="primary" @click="exportData('dataForm2')">
                  导出
                </el-button>
              </el-col>
            </el-row>
          </el-tab-pane>


          <el-tab-pane label="基础曲线导入" name="three">
            <el-row :gutter="20">
              <el-col :span="24" :offset="1" style="margin-top:50px">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrlBase"
                  :before-upload="beforeAvatarUploadBase"
                  :on-success="handleSuccessBase"
                  :on-error="handleErrorBase"
                  :headers="uploadHeaders"
                  accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传表格文件，且不超过500kb</div>
                </el-upload>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="转移曲线导入" name="four">
            <el-row :gutter="20">
              <el-col :span="24" :offset="1" style="margin-top:50px">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrlTransfer"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleSuccess"
                  :on-error="handleError"
                  :headers="uploadHeaders"
                  accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传表格文件，且不超过500kb</div>
                </el-upload>
              </el-col>
            </el-row>
          </el-tab-pane>


        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import store from '@/store'
import {getToken} from '@/utils/auth'

import XEUtils from 'xe-utils'
import cvoptions from '@/views/CurveManageNew/mixins/cvoptions'

export default {
  name: 'CurveImport',
  mixins: [cvoptions],
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {

    const XEUtilsLocat = XEUtils.locat()
    const hostName = XEUtilsLocat.hostname
    const protocol = XEUtilsLocat.protocol
    return {
      /* 表单 */
      formSubmitData: {
        cv_code: ''
      },
      rules: {
        cv_code: [
          {required: true, message: '请选择曲线！', trigger: 'blur'},
        ],
      },
      /* tabs切换 */
      activeName: 'first',
      /* 上传 */
      uploadHeaders: {},
      uploadUrlTransfer: `${protocol}//${hostName}:7001/ftpInterestRate/leadinginTransferCurve`,  //转移曲线导入接口
      uploadUrlBase: `${protocol}//${hostName}:7001/ftpInterestRate/leadinginbasicCurvetext`,  //基础曲线导入接口


      /* 域名参数&APIURL */
      hostName: hostName,
      protocol: protocol,
      apiUrl: {
        'first': '/ftpInterestRate/BasicCurveExports',
        'second': '/ftpInterestRate/findTransferCurvederive'
      },

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    /* 导出 */
    exportData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let toUrl = `${this.protocol}//${this.hostName}:7001${this.apiUrl[`${this.activeName}`]}?${XEUtils.serialize(this.formSubmitData)}`
          console.log(toUrl);
          window.location.href = toUrl
        } else {
          return false;
        }
      });
    },
    /* tabs切换 */
    handleClick(tab, event) {
      this.$refs.dataForm1.resetFields();
      this.$refs.dataForm2.resetFields();
    },
    /* 上传文件之前的钩子 */
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 200;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 200MB!');
      // }
      // return isJPG && isLt2M;
    },
    /* 上传成功 */
    handleSuccess(response, file, fileList) {
      if (response.err_code === '20000') { //导入成功
        this.$message({
          message: '导入成功',
          type: 'success'
        });
      } else if (response.err_code === '20001') { //曲线名称错误
        this.$message.error('曲线名称错误息');
      } else if (response.err_code === '20002') { //导入数据错误
        this.$message.error('导入数据错误');
      } else if (response.err_code === '30000') { //导入失败
        this.$message.error('导入失败');
      }
    },
    /* 上传失败 */
    handleError(err, file, fileList) {
      alert('上传失败error')
    },

    /* 上传文件之前的钩子 */
    beforeAvatarUploadBase(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 200;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 200MB!');
      // }
      // return isJPG && isLt2M;
    },
    /* 上传成功 */
    handleSuccessBase(response, file, fileList) {
      if (response.err_code === '20000') { //导入成功
        this.$message({
          message: '导入成功',
          type: 'success'
        });
      } else if (response.err_code === '20001') { //曲线名称错误
        this.$message.error('曲线名称错误息');
      } else if (response.err_code === '20002') { //导入数据错误
        this.$message.error('导入数据错误');
      } else if (response.err_code === '30000') { //导入失败
        this.$message.error('导入失败');
      }
    },
    /* 上传失败 */
    handleErrorBase(err, file, fileList) {
      alert('上传失败error')
    },

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始化上传token
    let token = store.getters.token || getToken();
    this.$set(this.uploadHeaders, 'Authorization', token)

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

</style>